<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <ServicesBanner :params="bannerParams" />

      <section class="mt-16">
        <div class="max-w-6xl px-4 mx-auto sm:px-6 lg:px-8 space-y-4">
          <div class="text-[#54595F] text-8 font-bold tracking-normal">
            {{ blog.title }}
          </div>
          <div class="flex">
            <share-network network="facebook" :url="shareUrl" v-slot="{ share }">
              <span @click="share">
                <img :src="facebook" alt="" />
              </span>
            </share-network>
            <share-network network="twitter" :url="shareUrl" v-slot="{ share }">
              <span @click="share">
                <img :src="twitter" alt="" />
              </span>
            </share-network>
            <share-network network="linkedin" :url="shareUrl" v-slot="{ share }">
              <span @click="share">
                <img :src="linkedin" alt="" />
              </span>
            </share-network>
            <share-network network="whatsapp" :url="shareUrl" v-slot="{ share }">
              <span @click="share">
                <img :src="whatsapp" alt="" />
              </span>
            </share-network>
          </div>
          <div class="flex">
            <span class="w-full border-[1px] border-black"></span>
          </div>
          <div class="ql-editor" v-html="blog.content" />
        </div>
      </section>
    </main>

    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Footer from '@/components/common/Footer.vue'
import ServicesBanner from '@/components/ServicesBanner.vue'
import banner from '@/images/resources/banner-blogs.webp'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { ShareNetwork } from 'vue3-social-sharing'
import facebook from '@/images/icon/facebook.svg'
import twitter from '@/images/icon/twitter.svg'
import linkedin from '@/images/icon/linkedin.svg'
import whatsapp from '@/images/icon/whatsapp.svg'

const baseUrl = import.meta.env.VITE_APP_BASE_API
const route = useRoute()

const blog = ref({})

const shareUrl = ref(window.location.href)

const fetchBlog = async () => {
  try {
    const response = await axios.get(baseUrl + '/web/blogs/' + route.params.id)
    blog.value = response.data.data // 更新数据
  } catch (error) {
    console.error(error)
  }
}

const bannerParams = {
  imgUrl: banner,
  title: 'Blog Details'
}

onMounted(() => {
  fetchBlog()
})
</script>
